<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<jsp:include page="menu.jsp"></jsp:include>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>邮箱登录</title>
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<style type="text/css">
			body {
   			 background-image: url("img/background.png");
    		 background-size: cover;
    		 font-family: "Noto Sans SC", sans-serif;
			}
			.ebu {
   			 width: 90%; /* 按钮宽度占满父单元格 */
   			 background-color: #5cb85c; 
  			 border: none; /* 去除按钮边框 */
  			 border-radius: 4px; /* 按钮圆角半径为4px */
  			 color: #fff; /* 按钮文字颜色为白色 */
   			 font-size: 14px; /* 按钮字体大小为16px */
   			 font-weight:bolder;
   			 cursor: pointer; /* 鼠标悬停时显示手型指针 */
   			 margin: 3px; /* 按钮顶部外边距为10px */
			}
			.ebu:hover {
 			  background-color: #4cae4c; /* 鼠标悬停时按钮背景颜色变亮 */
			}
			.res {
				font-size: 20px;
				color: #FACD5B;
				text-align: center;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			function send(){
				let username = $("#username").val();
				let email = $("#email").val();
				if(username!="" && email!=""){
					$.post(
						"sendemail",
						{
							"name":username,
							"email":email
						},
						function(res){
							$(".res").html(res);
						}
					)
				}
			}
		</script>
	</head>
	<body>
		<div style="height: 150px"></div>
		<form action="loginemail" method="post" class="f1">
			<h1 class="title">邮箱登录</h1>
			<table>
				<tr>
					<td>用户名</td>
					<td colspan="2">
						<input type="text" name="username" id="username" placeholder="请输入您的用户名："/>
					</td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td>
						<input type="text" name="email" id="email" placeholder="请输入您的邮箱："/>
						
					</td>
					<td>
						<input type="button" value="发送验证码" onclick="send()" class="ebu" title="点击发送验证码">
					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="code" />
						
					</td>
					<td>
						<span class="res"></span>
					</td>
				</tr>
				
				<tr>
					<td></td>
					<td colspan="2">
						<input type="submit"  value="登录" class="sub1" title="点击登录"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>
